<template>
  <div>
    <vxe-toolbar ref="xToolbar" :loading="loading">
      <template #buttons>
        <vxe-button
          status="primary"
          content="新增"
          @click="insertEvent"
          v-if="title != '配件详情'"
        ></vxe-button>
      </template>
    </vxe-toolbar>
    <vxe-table
      border
      show-overflow
      resizable
      keep-source
      ref="xTable"
      row-id="id"
      height="300px"
      :edit-config="{
        trigger: 'click',
        mode: 'row',
        showUpdateStatus: true,
        showInsertStatus: true
      }"
      :data="listData"
    >
      <vxe-column field="regionCode" title="区域名称" :edit-render="{}">
        <template #default="{ row }">
          <span>{{ formatterFiled(row.regionCode,'code','name',regionalList) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.regionCode" placeholder="请选择区域名称" filterable clearable :disabled="title == '配件详情'">
            <vxe-option
              v-for="item in regionalList"
              :key="item.code"
              :value="item.code"
              :label="item.name"
            ></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column
        field="supplierId"
        title="经销商"
        :edit-render="{}"
        :filters="supplierList"
        :filter-multiple="false"
      >
        <template #default="{ row }">
          <span>{{ formatterFiled(row.supplierId,'id','supplier',supplierList) }}</span>
        </template>
        <template #edit="{ row }">
          <vxe-select v-model="row.supplierId" placeholder="请选择经销商" clearable filterable :disabled="title == '配件详情'">
            <vxe-option
              v-for="item in supplierList"
              :key="item.id"
              :value="item.id"
              :label="item.supplier"
            ></vxe-option>
          </vxe-select>
        </template>
      </vxe-column>
      <vxe-column
        field="purchasePrice"
        title="采购价"
        width="260"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.purchasePrice"
            type="float"
            placeholder="请输入采购价"
            :digits="2"
            :disabled="title == '配件详情'"
          ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column
        field="retailPrice"
        title="零售价"
        width="260"
        :edit-render="{}"
      >
        <template #edit="{ row }">
          <vxe-input
            v-model="row.retailPrice"
            type="float"
            placeholder="请输入零售价"
            :digits="2"
            :disabled="title == '配件详情'"
          ></vxe-input>
        </template>
      </vxe-column>
      <vxe-column title="操作" width="80" v-if="title != '配件详情'">
        <template #default="{ row }">
          <vxe-button type="text" status="danger" @click="removeRowEvent(row)">删除</vxe-button>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>
<script>
import XEUtils from 'xe-utils'
import {
  delSysRegion,
  getSysRegionList,
  getJshSupplierJXSList
} from '@/api/carLine'
import { Colgroup } from 'vxe-table'
export default {
  name: 'applyMain',
  props:{
    title:{
      type: String,
      default: ""
    }
  },
  data() {
    return {
      loading: false,
      listData: [],
      regionalList: [],
      supplierList: [],
      selection: [],
      serachForm: {
        code: '',
        type: 'province'
      },
      pageInfo: {
        page: 1,
        size: 100,
        total: 0
      },
      brands: [],
      typeList: ['province', 'city', 'area', 'street'],
      typeDataList: [
        {
          code: 'province',
          value: '省级'
        },
        {
          code: 'city',
          value: '城市'
        },
        {
          code: 'area',
          value: '区县'
        },
        {
          code: 'street',
          value: '乡镇/街道'
        }
      ],
      saveType: 'update'
    }
  },
  created() {
  },
  mounted() {
    this.getRegionalList()
    this.getSupplierList()
  },
  methods: {
     /**
     * 设置初始化值
     */
    initTableData(val){
      val.length&&val.map(item=>{
        item.cityId = item.cityId && item.cityId.toString()
        item.supplierId = item.supplierId && item.supplierId.toString()
      })
      this.listData = val;
    },
    /**
     * 获取当前表格的数据
     */
    getTableData(){
      let list = this.listData
      const $table = this.$refs.xTable
      const { insertRecords ,removeRecords} = $table.getRecordset()
      if(insertRecords.length > 0){
        let arr = insertRecords
        arr.map((item) => {
          let op = {
            regionCode:item.regionCode,
            supplierId: item.supplierId,
            purchasePrice: item.purchasePrice,
            retailPrice: item.retailPrice
          }
          list.push(op)
        })
      }
      if(removeRecords.length > 0){
        let arr = removeRecords.map(item=>{
          return item.id
        });
        arr.map((item) => {
          list.forEach((el,index)=>{
            if(item == el.id){
              list.splice(index,1)
            }
          })
        })
      }
      return list;
    },
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    /**
     * 插入数据
     */
    async insertEvent() {
      const $table = this.$refs.xTable
      const newRecord = {}
      const { row: newRow } = await $table.insert(newRecord)
      await $table.setActiveRow(newRow)
    },
    async removeRowEvent (row) {
      const $table = this.$refs.xTable
      await $table.remove(row)
    },
    /**
     * 获取经销商数据
     */
    getSupplierList() {
      let param = {
        page: 1,
        size: 1000
      }
      getJshSupplierJXSList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.supplierList = data.content
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    },
    /**
     * 获取区域数据
     */
    getRegionalList() {
      let param = {
        page: 1,
        size: 100,
        type: 'province'
      }
      getSysRegionList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.regionalList = data.content
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    }
  }
}
</script>
